import cn from 'classnames';

import React from 'react';
import PropTypes from 'prop-types';

import Input from '@kuiper-components/input';
import Select from '@kuiper-components/select';

import s from './style.module.css';
import Helper from '../Helper';

const Option = Select.Option;

function TargetInput({
	className,
	value,
	disableInput,
	disableSelect,
	onChange,
	...props
}) {
	const handleHostChange = host => onChange({ ...value, host });
	const handleProtocolChange = protocol => onChange({ ...value, protocol });
	const overlay = () => {
		return (
			<>
				协议+子域名/IPv4/IPv6+端口
				<br />
				示例：http://www.example.com:80 <br />
				<span className={s.tipSpan}>
					http://[AD80:0000:0000:0000:ABAA:0000:00C2:0002]
				</span>
				<br />
				<span className={s.tipSpan}>https://1.1.1.1</span> <br />
			</>
		);
	};
	return (
		<>
			<Input
				className={cn(className, s.hostInput, {
					[s.disabled]: disableInput,
				})}
				{...props}
				disabled={disableInput}
				before={
					<Select
						className={s.protocolSelect}
						value={value.protocol}
						disabled={disableSelect}
						onChange={handleProtocolChange}
					>
						<Option value="http:">HTTP://</Option>
						<Option value="https:">HTTPS://</Option>
					</Select>
				}
				value={value.host}
				onChange={handleHostChange}
			/>
			<Helper className={s.helper} placement="bottom" overlay={overlay()} />
		</>
	);
}

TargetInput.propTypes = {
	className: PropTypes.string,
	value: PropTypes.shape({
		host: PropTypes.string,
		protocol: PropTypes.string.isRequired,
	}).isRequired,
	disableInput: PropTypes.bool,
	disableSelect: PropTypes.bool,
	onChange: PropTypes.func,
};
TargetInput.defaultProps = {
	className: s.TargetInput,
	value: { protocol: 'http:' },
	disableInput: false,
	disableSelect: false,
	onChange: x => x,
};

export default TargetInput;
